<script setup lang="ts">
import {ref} from "vue";
import Card from "@/components/Card.vue";
import {NButton, NSpace} from 'naive-ui';
const num = ref<number>(0);
const list = ref([0]);

function add() {
  num.value++;
  // 随机索引
  // const len = list.value.length;
  // const idx = Math.floor(Math.random() * len);
  // console.log('length',len, 'idx', idx,'number',num.value);
  //插入数据
  // list.value.splice(idx, 0, num.value);
  list.value.push(num.value);
}

function remove() {
  const len = list.value.length;
  const idx = Math.floor(Math.random() * len);
  list.value.splice(idx, 1,);

}


</script>

<template>
  <card title="添加一个元素">
    <n-space>
      <n-button @click="add">添加一个元素</n-button>
      <n-button @click="remove">删除一个元素</n-button>
    </n-space>
    <ul class="border m-3 rounded-3 p-3 shadow">
      <transition-group tag="ul" name="list">
        <li v-for="item in list" :key="item">{{ item }}</li>
      </transition-group>
    </ul>
  </card>

</template>

<style scoped>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>